<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container" style="width:1000px;margin-top: 80px;margin-left: 400px">
    <form action="/foodshare/main/savePublish" id="food_form" method="post">
        <input type="hidden" name="userId" th:value="${user.userId}">
        <!--封面图片-->
        <div style="width: 690px;height: 390px;border-radius: 8px;background: #eee url(/foodshare/main/img/add.png) no-repeat center 140px;">
            <input type="hidden" class="image" name="image">
            <img style="width: 690px;height: 390px;" id="upload_img" data-anim="layui-anim-scaleSpring" class="layui-upload layui-anim">
            <p id="demonText"></p>
        </div>
        <!--美食名称-->
        <input style="margin-top:20px;width: 690px" type="text" class="form-control" name="foodName" placeholder="美食名称">
        <input style="margin-top:20px;width: 690px;" type="text" class="form-control" name="title" placeholder="标题">
        <textarea style="margin-top:20px;width: 690px;" class="form-control" rows="3" name="detail" placeholder="详情"></textarea>
        <!-- 食材清单 -->
        <h3>食材清单</h3>
        <input style="width: 690px" type="text" class="form-control" name="material.materialName" placeholder="食材名称">
        <input style="width: 690px" type="text" class="form-control" name="material.materialUsage" placeholder="食材用量">

        <!-- 步骤 -->
        <h3>步骤</h3>
        <ul class="UL">
            <li><div style="float:left;width: 200px;height: 200px;border-radius: 8px;font-size: 15px;color: #999;text-align: center;background: #EEEEEE url(/foodshare/main/img/add.png) no-repeat center 60px;">
                <input type="hidden" class="image" name="detailimg">
            </div>
                <textarea style="margin-left:10px;width: 480px;height: 200px" name="describe" placeholder="步骤描述" ></textarea>
            </li>
        </ul>
        <p class="page-header" style="margin-top: 10px;width: 690px;"><a id="add" href="javascript:void(0);" style="color: #256DC6;text-decoration: none">增加一栏</a></p>
        <div style="width: 690px">
            <br/>
            <!--美食类别-->
            <select style="float:left;width: 120px" name="categoryId" class="form-control">
                <option disabled selected style="display: none">选择类别</option>
                <option th:each="cate:${category}" th:text="${cate.categoryName}"
                        th:value="${cate.categoryId}"></option>
            </select>
            <span><button style="margin-left: 20px" type="submit" class="btn btn-primary" form="food_form">添加</button></span>
        </div>
    </form>
</div>
<!-- 底部 -->
<div style="margin-top: 190px">
<div th:replace="common/m_bottom::m_bottom"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script th:src="@{/asserts/js/layui.js}"></script>
<script>
    var count = 1;
    $("#add").click(function(){
        var html ='<li><div style="float:left;width: 200px;height: 200px;border-radius: 8px;font-size: 15px;color: #999;text-align: center;background: #EEEEEE url(/foodshare/main/img/add.png) no-repeat center 60px;">\n' +
            '                <input id="simg" type="hidden" class="image" name="detailimg">\n' +
            '            </div>\n' +
            '                <textarea id="sdsc" style="margin-left:10px;width: 480px;height: 200px" name="describe" placeholder="步骤描述"></textarea>\n' +
            '            </li>';
        $(".UL").append(html);
        myfunction();
        count++;
    });
    function myfunction() {
        document.querySelectorAll('textarea').forEach(
            (item,i,obj)=>{console.log(i + " - " + item.textContent)}
            )
    }
</script>
</body>
</html>